<script lang="ts" setup>
import { computed } from 'vue'
import NotDataImage from '@/static/images/sys/not-data.png'

const props = defineProps({
  text: {
    type: String,
    default: '抱歉，没有找到相关内容',
  },
  isWhite: {
    type: Boolean,
    default: false,
  },
  isBtn: {
    type: Boolean,
    default: false,
  },
  imageUrl: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '280rpx',
  },
  height: {
    type: String,
    default: '280rpx',
  },
})

const imagesUrl = computed(() => {
  return props.imageUrl || NotDataImage
})
</script>

<template>
  <view class="not-view">
    <image :src="imagesUrl" :style="{ width, height }"></image>
    <view class="texts">{{ text }}</view>
  </view>
</template>

<style lang="scss" scoped>
.not-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    width: 240rpx;
    height: 240rpx;
  }
  .texts {
    width: 350rpx;
    margin-top: 30rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #9399a4;
    text-align: center;
  }
}
</style>
